<template>
    <div class="layout-padding">
        <el-card shadow="hover" class="layout-padding-auto">
            <div class="content">
                <!-- base-form 里面 默认搜索重置按钮 && 事件 -->
                <BaseForm ref="formRef" :model="state.ruleForm">
                    <BaseFormItem label="姓名">
                        <el-input v-model="state.ruleForm.name" placeholder="根据姓名搜索"></el-input>
                    </BaseFormItem>
                    <BaseFormItem label="性别">
                        <el-select v-model="state.ruleForm.gender">
                            <el-option label="男" :value="1" />
                            <el-option label="女" :value="0" />
                        </el-select>
                    </BaseFormItem>
                    <BaseFormItem label="班级">
                        <el-select v-model="state.ruleForm.class">
                            <el-option label="计算机1班" :value="0" />
                            <el-option label="法学1班" :value="1" />
                        </el-select>
                    </BaseFormItem>
                    <BaseFormItem>
                        <el-button type="primary">搜索</el-button>
                        <el-button>重置</el-button>
                        <el-button @click="isShowDialog = true">添加</el-button>
                    </BaseFormItem>
                </BaseForm>
                <BaseTable 
                    :table-data="tableData" 
                    :loading="loading" 
                    :columns="columns"
                    :selection="true" 
                    @selection-change="handleSelectionChange"
                ></BaseTable>
                <Pagination 
                    :total="total" 
                    :params="paginationParams" 
                    :page-size="[10, 20, 50]"
                    layout="prev, pager, next"    
                />
            </div>
        </el-card>

        <BaseDialog v-model="isShowDialog" title="添加学生">
            <template #content> 
                <BaseForm>
                    <BaseFormItem></BaseFormItem>
                </BaseForm>
            </template>
            <template #footer>
            <span class="dialog-footer">
                <el-button size="default">取 消</el-button>
            </span>
            </template>
        </BaseDialog>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'

const formRef = ref()
const state = reactive({
    ruleForm: {
        name: '',
        gender: 1,
        class: 1
    },
    // rules: {
    //     roleName: [{ message: '请选择角色名称' }]
    // }
})

const loading = ref(false)
const tableData = ref([
    { name: '胡歌', gender: 1, class: 1, status: 1 },
    { name: '刘亦菲', gender: 0, class: 2, status: 1 },
    { name: '张三', gender: 1, class: 1, status: 0 }
])
const columns = [
    { prop: 'name', label: '姓名' },
    { prop: 'gender', label: '性别' },
    { prop: 'class', label: '班级' },
    { prop: 'status', label: '状态' }
]
const handleSelectionChange = (e: any) => {
    console.log('handleSelectionChange: ', e)
}

const paginationParams = reactive({
    pageNum: 1,
    pageSize: 10
})
const total = ref(40)

const isShowDialog = ref(false)

</script>

<style scoped lang="scss">

</style>